<template>
    <!-- 应收明细 -->
    <div class="content-box">
        <div v-show="isshowList">
            <!--工具条-->
            <el-col :span="24" class="toolbar cover">
                <el-form class="title">
                    <h2>应收明细</h2>
                    <el-form-item>
                        <el-button size="small" @click="search" class="el-icon-search">&nbsp;查询</el-button>
                        <!-- 客户：
                        <el-tooltip content="请您输入客户名称快捷查询" placement="top">
                          <el-select 
                          v-model="custom" 
                          filterable 
                          placeholder="请输入关键字" 
                          style="width:10%"
                          :remote-method="remoteMethod"
                          remote
                          clearable>
                              <el-option v-for="item in Customer" 
                              :key="item.Code"
                              :label="item.Name"
                              :value="item.Code">
                              </el-option>
                          </el-select>&#12288;
                        </el-tooltip> -->
                    </el-form-item>
                </el-form>
            </el-col>
            <!-- 列表 -->
            <el-table class="indexList" height="700" :data="DetailDataList" highlight-current-row  v-loading="loading" element-loading-text="正在加载中">
                <el-table-column label="序号" type="index" width="100" sortable>
                </el-table-column>
                <el-table-column prop="Employee_Name" label="业务员">
                </el-table-column>
                <el-table-column prop="Income_DocNo" label="收入确认单号">
                </el-table-column>
                <el-table-column prop="Custom_Name" label="客户名称"  show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="Income_ContractNo" label="合同编号" sortable>
                </el-table-column>
                <el-table-column prop="Income_TotalIncomeMoney" label="合同金额" sortable>
                </el-table-column>
                <el-table-column prop="CurrentLeaveMoney" label="前期累计收款" sortable>
                </el-table-column>
                <el-table-column prop="Received" label="本次收款" sortable>
                </el-table-column>
                <el-table-column prop="RcvLine_CreateDate"  :formatter="formatDate" label="收款日期" sortable>
                </el-table-column>
                <el-table-column prop="Surplus" label="欠款余额" sortable>
                </el-table-column>
            </el-table>

            <!--工具条-->
            <el-col :span="24" class="toolbar">
              <el-pagination @current-change="changePage" layout="prev, pager, next" :page-size="rows" :current-page="currentPage" :total="total" style="float:right;">
              </el-pagination>
            </el-col>

            <!--查询-->
            <el-dialog title="查询" :visible.sync="dialogSearchVisible" :modal-append-to-body="false" size="tiny">
              <el-form :model="Searchform">
                <el-form-item label="客  户 ：" :label-width="formLabelWidth">
                  <el-input v-model="Searchform.Custom_Name" style="width:262px;"></el-input>
                </el-form-item>
                <el-form-item label="业务员 ：" :label-width="formLabelWidth">
                  <el-select v-model="Searchform.Income_SalesEmp" style="width:262px;" placeholder="请选择">
                    <el-option value="" label="全部">全部</el-option>
                    <el-option
                      v-for="item in StaffList"
                      :key="item.ID"
                      :label="item.RealName"
                      :value="item.ID">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="收入单号 ：" :label-width="formLabelWidth">
                  <el-input v-model="Searchform.Income_DocNo" style="width:262px;"></el-input>
                </el-form-item>
                <el-form-item label="合同编号 ：" :label-width="formLabelWidth">
                  <el-input v-model="Searchform.Income_ContractNo" style="width:262px;"></el-input>
                </el-form-item>
                <el-form-item label="合同金额 ：" :label-width="formLabelWidth">
                  <el-input v-model.number.trim="Searchform.StartIncomeMoney" auto-complete="off" style="width:120px;"></el-input>
                  至&nbsp;<el-input v-model.number.trim="Searchform.EndIncomeMoney" auto-complete="off" style="width:120px;"></el-input>
                </el-form-item>
                <el-form-item label="前期收款 ：" :label-width="formLabelWidth">
                  <el-input v-model.number.trim="Searchform.StartReceived" auto-complete="off" style="width:120px;"></el-input>
                  至&nbsp;<el-input v-model.number.trim="Searchform.EndReceived" auto-complete="off" style="width:120px;"></el-input>
                </el-form-item>
                <el-form-item label="本次收款 ：" :label-width="formLabelWidth">
                  <el-input v-model.number.trim="Searchform.StartSurplus" auto-complete="off" style="width:120px;"></el-input>
                  至&nbsp;<el-input v-model.number.trim="Searchform.EndSurplus" auto-complete="off" style="width:120px;"></el-input>
                </el-form-item>
                <el-form-item label="欠款金额 ：" :label-width="formLabelWidth">
                  <el-input v-model.number.trim="Searchform.StartCurrentLeaveMoney" auto-complete="off" style="width:120px;"></el-input>
                  至&nbsp;<el-input v-model.number.trim="Searchform.EndCurrentLeaveMoney" auto-complete="off" style="width:120px;"></el-input>
                </el-form-item>
                <el-form-item label="收款日期 ：" :label-width="formLabelWidth">
                  <el-date-picker type="date" v-model="Searchform.StartCreateDate" style="width:120px;" placeholder="选择日期"></el-date-picker>
                  至&nbsp;<el-date-picker type="date" v-model="Searchform.EndCreateDate" style="width:120px;" placeholder="选择日期"></el-date-picker>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer cover">
                <el-button size="small" @click="Reset">重 置</el-button>
                <el-button size="small" @click="Query">确 定</el-button>
                <el-button size="small" @click="dialogSearchVisible = false">取 消</el-button>
              </div>
            </el-dialog>
        </div>
    </div>
</template>
<script>
export default {
  name: "Detail",
  data() {
    return {
      DetailDataList: [],
      total: 0, //数据总数
      rows: 100, //每页显示多少条
      currentPage: 1,//当前页数
      isshowList: true, //table表单显隐
      loading: true,
      Customer: [], //客户
      SalesEmp: [], //业务员
      StaffList: [], //获得业务员
      custom:[],//客户
      sales:'',//业务员
      htCode:'',//合同编号
      dialogSearchVisible:false,//查询窗口
      minMoney:null,//最小金额
      maxMoney:null,//最大金额
      formLabelWidth:'120px',
      Searchform: {
          Custom_Name:'',
          Income_SalesEmp:'',
          Income_DocNo:'',
          Income_ContractNo:'',
          StartIncomeMoney:'',
          EndIncomeMoney:'',
          StartReceived:'',
          EndReceived:'',
          StartSurplus:'',
          EndSurplus:'',
          StartCurrentLeaveMoney:'',
          EndCurrentLeaveMoney:'',
          StartCreateDate:'',
          EndCreateDate:''
      },
    };
  },
  methods: {
    formatDate(row, column) {
      if (row.RcvLine_CreateDate) {
        //如果日期存在的 才格式化
        return row.RcvLine_CreateDate.split("T", 1);
      } else {
        ""
      };
    },
    changePage(page) {//当前页数
      this.currentPage = page;
      this.getList();
    },
    async getList() {
        this.loading = true;
        const res = await axios.get('getDetailList',{
          page:this.currentPage,
          rows:this.rows, //显示100条
        });
        this.total = res.total;//总页数
        this.DetailDataList = res.rows;
        this.loading = false;
    },
    search(){
      this.dialogSearchVisible = true;
      this.getGetStaffList();
    },
    Reset(){
      this.Searchform = {
          Custom_Name:'',
          Income_SalesEmp:'',
          Income_DocNo:'',
          Income_ContractNo:'',
          StartIncomeMoney:'',
          EndIncomeMoney:'',
          StartReceived:'',
          EndReceived:'',
          StartSurplus:'',
          EndSurplus:'',
          StartCurrentLeaveMoney:'',
          EndCurrentLeaveMoney:'',
          StartCreateDate:'',
          EndCreateDate:''
      }
    },
    //获取业务员
    async getSales(){
      this.SalesEmp = await axios.get('getEmployee');
    },
    async getGetStaffList(){
      this.StaffList = await axios.get('Fu_GetStaffList');
    },
    /**
     * 查询
     */
    async Query(){
       if(new Date(this.Searchform.StartCreateDate)>new Date(this.Searchform.EndCreateDate)){
        this.$message({
          message: '开始日期必须小于或者等于结束时期！',
          type: 'warning',
          duration: 1200
        });
        return;
      }else if(
        (this.Searchform.StartIncomeMoney>this.Searchform.EndIncomeMoney) ||
        (this.Searchform.StartReceived>this.Searchform.EndReceived) ||
        (this.Searchform.StartSurplus>this.Searchform.EndSurplus) ||
        (this.Searchform.StartCurrentLeaveMoney>this.Searchform.StartCurrentLeaveMoney)
      ){
        this.$message({
          message: '开始金额必须小于或者等于结束金额！',
          type: 'warning',
          duration: 1200
        });
        return;
      }
      this.dialogSearchVisible = false;
      console.log(this.Searchform.StartDate ? moment(this.Searchform.StartDate).format('L') : '','1');
      console.log(this.Searchform.EndDate ? moment(this.Searchform.EndDate).add(1,"d").format('L') : '','2');
      let filterName = {
        "groupOp": "AND",
        "rules": [{
          "field": "Custom_Name",
          "dataType": "string",
          "op": "cn",
          "data": this.Searchform.Custom_Name
        }, {
          "field": "Income_SalesEmp",
          "dataType": "string",
          "op": "eq",
          "data": this.Searchform.Income_SalesEmp
        }, {
          "field": "Income_DocNo",
          "dataType": "string",
          "op": "cn",
          "data": this.Searchform.Income_DocNo
        }, {
          "field": "Income_ContractNo",
          "dataType": "string",
          "op": "cn",
          "data": this.Searchform.Income_ContractNo
        }, {
          "field": "Income_TotalIncomeMoney",
          "dataType": "numeric",
          "op": "ge",
          "data": this.Searchform.StartIncomeMoney
        }, {
          "field": "Income_TotalIncomeMoney",
          "dataType": "numeric",
          "op": "le",
          "data": this.Searchform.EndIncomeMoney
        }, {
          "field": "Received",
          "dataType": "numeric",
          "op": "ge",
          "data": this.Searchform.StartReceived
        }, {
          "field": "Received",
          "dataType": "numeric",
          "op": "le",
          "data": this.Searchform.EndReceived
        }, {
          "field": "Surplus",
          "dataType": "numeric",
          "op": "ge",
          "data": this.Searchform.StartSurplus
        }, {
          "field": "Surplus",
          "dataType": "numeric",
          "op": "le",
          "data": this.Searchform.EndSurplus
        }, {
          "field": "CurrentLeaveMoney",
          "dataType": "numeric",
          "op": "ge",
          "data": this.Searchform.StartCurrentLeaveMoney
        }, {
          "field": "CurrentLeaveMoney",
          "dataType": "numeric",
          "op": "le",
          "data": this.Searchform.EndCurrentLeaveMoney
        }, {
          "field": "RcvLine_CreateDate",
          "dataType": "string",
          "op": "ge",
          "data": this.Searchform.StartCreateDate
        }, {
          "field": "RcvLine_CreateDate",
          "dataType": "string",
          "op": "le",
          "data": this.Searchform.EndCreateDate
        }],
        "groups": []
      }
      this.loading = true;
      const res = await axios.post("getDetailList", { 
        filter:JSON.stringify(filterName),
        page:this.currentPage,
        rows:this.rows,
      });
      this.total = res.total;//总页数
      this.DetailDataList = res.rows;
      this.loading = false;
    }
  },
  mounted() {
    this.getList();
    /* this.getSalesEmpCustomerDT(); */
    this.getSales();
  }
};
</script>
<style scoped lang="scss">
@import "../../common/css/index.css";
.toolbar h2 {
  margin: 10px auto 0 0;
  width:10rem
}
</style>

